<template>
  <NavBar title="设置"></NavBar>
  <div style="padding: 20rpx 30rpx 0">
    <van-cell-group>
      <!-- <van-cell title="回答偏好设置" is-link url="/pages/answer/index" /> -->
      <van-cell title="设置密码" is-link @click="changePassword" />
    </van-cell-group>
  </div>
  <van-toast id="van-toast" />
  <editPassword :show.sync="isShow" @show="isShow = false"></editPassword>

  <div class="btnDivSty">
    <van-button type="primary" size="large" round @click="logout">退出登录</van-button>
  </div>
</template>

<script setup>
import editPassword from "./components/editPassword.vue";
import NavBar from "@/components/NavBar/index.vue";
import Toast from "@vant/weapp/dist/toast/toast";
import { ref } from "vue";
import { removeToken } from "@/utils/auth";
import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();
const isShow = ref(false);

const changePassword = () => {
  isShow.value = true;
};

const logout = () => {
  removeToken();
  userStore.removeUserInfo();
  uni.removeStorageSync('chatList');
  uni.navigateTo({ url: "/pages/wxlogin/index" });
};
</script>

<style lang="less" scoped>
::v-deep {
  .van-popup {
    background-color: var(--a-main-box-bg-color);

    .van-field__label {
      color: var(--a-two-text-color);
    }

    input {
      color: var(--a-one-text-color);
    }

    .van-action-sheet__header {
      color: var(--a-one-text-color);
    }
  }

  .van-button {
    background-color: var(--a-main-color);
    border: none;
  }

  .van-cell {
    background-color: var(--a-main-box-bg-color);
    color: var(--a-one-text-color);
  }

  .van-cell:after {
    border: none;
  }

  .van-cell-group {
    border-radius: 30rpx;
    overflow: hidden;

    &::after {
      border: none;
    }

    &before {
      border: none;
    }
  }
}

.btnDivSty {
  & /deep/.van-button {
    display: block;
    background-color: var(--a-main-color);
    border: none;
    width: 400rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin: 30rpx auto 0;
  }
}
</style>
